import React, { Component } from 'react';
import { Form, Input, Button, message, } from 'antd';
import Wheaders from '../../components/Headers';
import { WindManUtils } from '../../util/utils';
import Http from '../../util/http';
import './index.less';

class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            timing: 0,
        }
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    render() {


        return (
            <div className='education-register'>
                <Wheaders left={'返回'} middle={'注册'} right={'登录'} />

                <Form
                    layout='vertical'
                    name='register'
                    className='register-form'
                    initialValues={{ remember: true }}
                    onFinish={this.handleFinish.bind(this)}
                    >
                    <Form.Item
                        name='username'
                        label='账号'
                    >
                        <Input onChange={ this.onChange.bind(this) }
                        placeholder='手机号' />
                    </Form.Item>
                    <Form.Item
                        name='code'
                        label='验证码'
                    >
                        <Input
                        type='text'
                        placeholder='验证码'
                        suffix={
                            <Button type='primary' onClick={this.getVcode.bind(this)} disabled={this.state.timing !== 0}>
                                {this.state.timing === 0 ? '发送验证码' : `${this.state.timing}s`}
                            </Button>
                        }
                        />
                    </Form.Item>
                    <Form.Item
                        name='password'
                        label='密码'
                        hasFeedback
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item
                        name='confirm'
                        label='确认密码'
                        dependencies={['password']}
                        hasFeedback
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item style={{ textAlign: 'center'}}>
                        <Button type='primary' htmlType='submit' className='login-form-button'>
                        注册并登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }

    UNSAFE_componentWillMount() {

    }

    onChange (e) {
        this.setState({ username: e.target.value });
    }

    getVcode (){
        Http.get('/LoginReg/sendSms', { phoneNumber: this.state.username })
        .then( res => {
            this.setState({ timing: 60 }, () => {
                this.interval = setInterval(() => {
                    if (this.state.timing > 0) {
                        this.setState({ timing: this.state.timing - 1 });
                    } else {
                        clearInterval(this.interval);
                    }
                }, 1000);
            });
        });
    }

    handleFinish (values) {
        const { username, code, password } = values;
        Http.get('/LoginReg/reg', { phoneNumber: username, code: code, password: password }).then( res => {
            message.success('注册成功并登录', 1, () => {
                WindManUtils.setStorage('user_info', res.resultData);
                this.props.history.push('/');
            });
        });
    }


}
export default Register;


